<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>店铺列表</title>
	<meta th:replace="admin/template/head.html"/>
</head>
<body>


<form class="layui-form" action="" id="searchForm">
	<div class="layui-form-item">
		<br>
		<div class="layui-inline">
			<label class="layui-form-label">店铺名称</label>
			<div class="layui-input-inline">
				<input type="text" name="searchName" id="searchName"  autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<a  onclick="doSearch()" class="layui-btn layui-btn-radius" >搜索</a>
			<button type="reset" class="layui-btn  layui-btn-radius ">重置</button>
		</div>
	</div>
</form>

<table class="layui-hide" id="list" lay-filter="list"></table>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
		<button class="layui-btn layui-btn-sm" lay-event="refresh">刷新列表</button>
	</div>
</script>
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="appoint">任命店长</a>
	<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detail">详情</a>

	<!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
</script>

<div hidden id="shopsTemplate">
	<br/>
	<div style="height: 300px; width: 400px">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-inline">
					<select name="users" id="users" style="height: 36px; width: 100%; border: 1px #e2e2e2 solid; border-radius: 3px;"></select>
				</div>
			</div>
		</div>
		<div style='color:red'>新店长只能指定普通账号，更换店长后旧的店长会变成普通账号</div>
	</div>
</div>

<script type="text/html" id="detail-panel">
	<div class="layui-form" style="width: 800px; height: 500px">
		<div class="layui-form-item">
			<br>
			<div class="layui-inline">
				<label class="layui-form-label">店铺名称</label>
				<div class="layui-input-inline">
					<input type="text" autocomplete="off" id="name" name="name" class="layui-input" readonly>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">店长</label>
				<div class="layui-input-inline">
					<input type="text" autocomplete="off" name="userName" id="userName" class="layui-input" readonly>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">店铺地址</label>
				<div class="layui-input-inline">
					<input type="text" autocomplete="off" name="addr" id="addr" class="layui-input" readonly>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">门店封面</label>
				<div class="layui-input-inline">
					<img src="" alt="上传成功后渲染" id="cover" style="max-width: 100px">
				</div>
			</div>
		</div>
	</div>
</script>
<script th:replace="admin/template/picbox.html"></script>
<script>

	const detailWin = (data = {})=> {
		let html = $('#detail-panel')[0].innerHTML;
		parent.layer.open({
			type: 1
			,offset: 'auto'
			,title: '店铺详情'
			,content: html
			,area: [700, 400]
			,success: function (layero, index){
				layero.find('#name').val(data.name);
				layero.find('#addr').val(data.addr);
				layero.find('#userName').val(data.userName);
				if(data.cover) layero.find('#cover').attr('src', '/static' + data.cover);
			}
		})
	}

	const editWin = (id = '')=> {
		let uri = '/shop/editPage'
		if(id) uri += '?id=' + id;
		parent.layer.open({
			type: 2
			,offset:'auto'
			,title:'店铺编辑'
			,content: uri
			,area:['80%','90%']
			,btn:'关闭全部'
			,btnAlign:'c'
			,yes:function () {
				parent.layer.closeAll();
			}
		});
	}

	const appointShopManager = (data)=> {
		let html = $('#shopsTemplate').html();
		parent.layer.open({
			type: 1
			, offset: 'auto'
			, title: '任命店长'
			, content: html
			, area: ['300', '400']
			, btn: ['保存', '关闭']
			, btnAlign: 'c'
			, success: function (layero, index) {
				$.get('/webUser/getUsers', {}, res=> {
					const users = res.data;
					let user_select = layero.find('#users');
					let options = '<option value="">请选择用户</option>';
					users.forEach((item, index) => {
						options += '<option value="' + item.id + '">' + item.name + '</option>'
					})
					user_select.html(options);
				})
			}
			,yes: function (index, layero) {
				let uid = layero.find('#users').val();
				if(!uid) return parent.layer.msg('请选择用户');
				$.post('/webUser/appoint', {
					sid: data.id,
					uid: uid,
				}, res=> {
					parent.layer.msg(res.msg);
					if(res.code === 0) {
						parent.layer.close(index);
						parent.window.frames[0].location.reload();
					}
				})
			}
		})
	}

	let $,layer,table,form;
	layui.use(['table','form', 'layer'], function(){
		table = layui.table;
		$ = layui.jquery;
		layer = layui.layer;
		form = layui.form;
		table.render({
			elem: '#list'
			,url:'/shop/list'
			,toolbar: '#toolbarDemo'
			,title: '用户数据表'
			,totalRow: true
			,cols: [
				[
					{type: 'checkbox', fixed: 'left'}
					,{field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
					,{field: 'name', title: '店铺名称'}
					,{field: 'addr', title: '门店地址'}
					,{field: 'userName', title: '店长'}
					,{field: 'cover', title: '门店封面'}
					,{fixed: 'right', title: '操作', toolbar: '#barDemo', width: 260}
				]
			]
			,page: true
			,limit: 10
			,limits: [10,50,80]
			,id:'listTable',
            done:function(){
                console.log('表格渲染完成');
                lightbox();//绑定相册插件
            }
		});

		//工具栏事件
		table.on('toolbar(list)', function(obj){
			let checkStatus = table.checkStatus(obj.config.id);
			let data = checkStatus.data;
			switch(obj.event){
				case 'add':
					editWin();
					break;
				case 'refresh':
					$('#searchForm')[0].reset();
					doSearch();
					break;
			};
		});

		//触发行双击事件
		table.on('rowDouble(list)', function(obj){
			detailWin(obj.data);
		});

		//工具条事件
		table.on('tool(list)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			let id = obj.data.id; //获得当前行数据
			let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			if(layEvent === 'del'){ //删除
				layer.confirm('真的删除店铺和关联数据吗', function(index){
					obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
					layer.close(index);
					$.post('/shop/delete', {id: id}, res=> {
						layer.msg(res.msg);
					})
				});
			} else if(layEvent === 'edit'){ //编辑
				editWin(id);
			} else if(layEvent === 'detail') {
				detailWin(obj.data);
			} else if(layEvent === 'appoint') {
				appointShopManager(obj.data);
			}
		});

	});

	function doSearch() {
		//通过jquery获取参数的值
		let name = $("#searchName").val();
		table.reload('listTable', {
			where: {
				name: name,
			},page: {
				curr:1
			}
		});
	}



</script>

</body>
</html>